<template>
  <view class="container">
    <view class="logo">
      <image src="/static/logo.png" mode="widthFix"></image>
    </view>
    <view class="form">
      <input class="input" type="text" v-model="loginForm.username" placeholder="请输入用户名" />
      <input class="input" type="password" v-model="loginForm.password" placeholder="请输入密码" />
	  <view class="inline" >
	          <input
	            v-model="loginForm.code"
				class="input"
	            size="large"
	            auto-complete="off"
	            placeholder="验证码"
	            @keyup.enter="handleLogin"
	          >
	          </input>
	          <div class="login-code">
	            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
	          </div>
	    </view>
      <button class="button" @click="login">登录</button>
    </view>
  </view>
</template>

<script>
	
export default {
  data() {
    return {
		loginForm: {
			username: '',
			password: '',
			code: '',
			uuid: ''
		},
		codeUrl: '',
    };
  },
  mounted() {
  	this.getCode();
  },
  methods: {
	  getCode() {
		  uni.request({
		  	// 接口地址
		  	url: '/dev-api/captchaImage',
		  	success: res => {
				  this.codeUrl = "data:image/gif;base64," + res.data.img;
				  this.loginForm.uuid = res.data.uuid;
		  	}
		  })
	  },
	  getInfo() {
		uni.request({
			// 接口地址
			url: '/dev-api/getInfo',
			method: "get",
			header: {
				'Authorization': 'Bearer ' + uni.getStorageSync('Token'),
				'Content-Type': 'application/json;charset=utf-8'
			},
			success: res => {
				uni.setStorage({
					key: 'userInfo',
					data: res.data.user
				});
						  console.log(res.data.user,"getInfo")
			}
		})  
	  },
    login() {
		uni.request({
			// 接口地址
			url: '/dev-api/login',
			data: {
			username: this.loginForm.username,
			password: this.loginForm.password,
			code:this.loginForm.code,
			uuid:this.loginForm.uuid
			},
			method: "POST",
			success: res => {
				if(res.data.code == "200") {
					uni.setStorage({
						key: 'Token',
						data: res.data.token
					});
					uni.setStorage({
						key: "username",
						data: this.loginForm.username
					});
					uni.showToast({
					  title: '登录成功',
					  icon: 'success'
					});
					// 登录成功后跳转到首页
					uni.switchTab({
					  url: '/pages/index/index'
					});
					
					this.getInfo();
					 
				} else {
					uni.showToast({
					  title: '用户名或密码错误！',
					  icon: 'none'
					});
				}
				
			},
			fail: res => {
				uni.showToast({
				  title: '请求失败',
				  icon: 'none'
				});
			}
		})
     
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.logo {
  margin-bottom: 40px;
}

.logo image {
  width: 100px;
  height: 100px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input {
  width: 80%;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.button {
  width: 80%;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}
.inline {
	display: flex;
	width: 85%;
}
</style>
